<template>
  <div class="main">
    <div
      class="person"
      v-for="item in persons"
      :key="item.name"
    >
      <div class="head">
        <img
          class="headimg"
          :src="item.imgUrl ? item.imgUrl : 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1556445229433&di=23e4c9de1148e20b210435c8a6624b1c&imgtype=0&src=http%3A%2F%2Fimg4.duitang.com%2Fuploads%2Fitem%2F201312%2F05%2F20131205172433_GPhxi.thumb.600_0.jpeg'"
        >
      </div>
      <div class="nickname">
        <div class="name">{{item.name}}</div>
        <div class="message">{{item.message ? item.message : '最近一条消息'}}</div>
      </div>
    </div>
  </div>
</template>

<script>
import {mapState} from 'vuex'
export default {
  name: 'Contact',
  computed: {
    ...mapState({
      persons: 'users'
    })
  },
  mounted () {
    console.log(this.persons)
  }
}
</script>

<style scoped>
.main {
  height: 100%;
  width: 100%;
  overflow-y: auto;
}

.main::-webkit-scrollbar {
  display: none;
}

.person {
  width: 100%;
  height: 80px;
  display: flex;
}

.head {
  flex: 0 0 80px;
  height: 100%;
}

.headimg {
  margin: 10%;
  width: 80%;
  height: 80%;
}

.nickname {
  box-sizing: border-box;
  border-bottom: 1px solid #ccc;
  flex: auto;
  height: 80px;
}

.name {
  margin: 4px 0 0 0;
  width: 100%;
  height: 45%;
  font-size: 20px;
  font-weight: bold;
}

.message {
  margin: 0 0 4px 0;
  width: 100%;
  height: 45%;
  color: #aaa;
}
</style>
